<template>
	<view class='page-container'>
		<view class="song-list-container">
			<block v-if="dataList.length>0">
				<!-- <view class="song-list-item" v-for="(item,index) in dataList.list" :key='item.id'>
					<view class="song-list-item-base-info">
						<text class="song-list-item-name">{{item.name}}</text>
						<text class="song-list-item-singer">{{item.singer}}</text>
					</view>
					<view class="song-list-item-option">
						<image src="/static/image/song/collect.png" class="song-list-item-option-icon"></image>
						<image src="/static/image/song/play.png" class="song-list-item-option-icon"></image>
					</view>
				</view> -->
			</block>
			<block v-else>
				<image src="/static/image/public/no_data.png" class="no_data"></image>
				<view class="no_data_title">暂无记录</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { apiCollectionList } from "@/api/collection";
	import usePagination from "@/hooks/usePagination";

	const { dataList, isLoading, currentPage, initFetch, fetchNextPage } = usePagination<CollectionListItemInterface>(apiCollectionList,10);

    // 在onLoad生命周期钩子中初始化数据加载
    onLoad(() => {
      initFetch();
    });
	
	
	
</script>

<style lang="scss" scoped>
	.page-container {
		.search-container {
			position: sticky;
			top: 0;
			width: 750rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-input {
				// margin: 0 40rpx;
				width: 670rpx;
				height: 56rpx;
				background: #353333;
				border-radius: 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0 28rpx;

				>icon {
					margin-right: 20rpx;
				}

				>input {
					width: 600rpx;
				}
			}
		}

		.song-option-container {
			width: 690rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.song-option-item {
				width: 334rpx;
				height: 168rpx;
			}
		}

		.song-tab-container {
			white-space: nowrap;
			width: 100%;
			padding-bottom: 10rpx;

			.song-tab-item {
				display: inline-block;
				// box-sizing: border-box;
				width: 56rpx;
				padding: 0 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.song-tab-item-current {
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 24rpx;
					height: 8rpx;
					background: #25DADA;
					border-radius: 4rpx;
					left: 48rpx;
					bottom: 0;
				}
			}

		}

		.song-list-container {

			.song-list-item {
				width: 646rpx;
				height: 40rpx;
				padding: 16rpx 48rpx 16rpx 56rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.song-list-item-base-info {
					max-width: 500rpx;
					display: flex;
					align-items: flex-end;

					.song-list-item-name {
						max-width: 350rpx;
						font-size: 28rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.song-list-item-singer {
						flex: 1;
						font-size: 24rpx;
						padding-left: 16rpx;
						color: #8A8A8A;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.song-list-item-option {
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.song-list-item-option-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>